<template>
	<view class="container">
		<!-- 物业缴费详情页面-顶部布局 -->
		<view style="width: 100%; height: 200rpx; display: inline-flex; flex-direction: row; position: absolute; position: fixed; z-index: 999">
			<view style="width: 16rpx"></view>
			<image src="/static/assets/property_charge_bg.png" style="width: auto; flex-grow: 1; height: 200rpx"></image>
			<view style="width: 16rpx"></view>
		</view>

		<!-- 收款单位 -->
		<view style="display: flex; flex-direction: column; height: 200rpx; position: absolute; justify-content: center; left: 40rpx; position: fixed; z-index: 999">
			<view style="color: #00ffba; font-size: 28rpx">收款单位：</view>
			<view style="color: #fff; font-size: 32rpx; margin-top: 20rpx">昊昀物业</view>
		</view>

		<!-- 占位 -->
		<view style="width: 100%; height: 200rpx"></view>

		<!-- 物业房租费用详情列表 -->
		<view class="item" :data-index="index" v-for="(item, index) in detail_list" :key="index">
			<!-- 图标 房间名 面积 -->
			<view style="display: flex; flex-direction: row; align-items: center; margin-left: 20rpx">
				<image src="/static/assets/house_16.png" style="width: 26rpx; height: 32rpx"></image>
				<view style="color: #000; font-size: 30rpx; margin-left: 20rpx; flex-grow: 1">{{ item.group.house_name }}</view>
				<view style="color: #00be6e; font-size: 28rpx; margin-left: 20rpx; margin-right: 20rpx">面积：{{ item.group.total_area }}㎡</view>
			</view>

			<!-- 分割线 -->
			<view style="background-color: #e5e5e5; margin-left: 20rpx; margin-right: 20rpx; height: 1rpx; margin-top: 16rpx"></view>

			<!-- 业主 -->
			<view style="display: flex; justify-content: space-between; margin-left: 20rpx; margin-right: 20rpx; margin-top: 20rpx">
				<view style="color: #999; font-size: 28rpx">业主：{{ item.group.owner_name }}</view>
			</view>

			<!-- 循环获取各类费用 -->
			<view :data-index="index" v-for="(fitem, index1) in item.fianceconfig" :key="index1">
				<view style="display: flex; justify-content: space-between; margin-left: 20rpx; margin-right: 20rpx; margin-top: 20rpx">
					<view style="color: #999; font-size: 28rpx">{{ fitem.name }}：</view>
					<view style="color: #999; font-size: 28rpx">￥{{ fitem.price }}</view>
				</view>
			</view>

			<!-- 缴费时间 -->
			<view style="display: flex; justify-content: space-between; margin-left: 20rpx; margin-right: 20rpx; margin-top: 20rpx">
				<view style="color: #999; font-size: 28rpx">缴费时间：</view>
				<view style="color: #999; font-size: 28rpx">{{ item.starttime }}至{{ item.endtime }}</view>
			</view>
		</view>

		<!-- 占位 -->
		<view style="height: 120rpx"></view>

		<!-- 底部固定的布局 -->
		<view style="display: flex; width: 100%; position: fixed; left: 0; bottom: 0rpx; align-items: center; border-top: #e5e5e5 solid 1rpx; background-color: white">

			<!-- #ifdef MP-WEIXIN -->
			<!-- 分享图标 -->
			<image style="width: 48rpx; height: 44rpx; margin-left: 20rpx; position: absolute; left: 0" src="/static/assets/nav14.png" @tap="onShare"></image>
			<button style="opacity: 0" open-type="share" size="mini">分享</button>
			<!-- #endif -->

			<!-- 已选 总计 -->
			<view style="color: #000; font-size: 32rpx; margin-left: 20rpx">合计：</view>
			<!-- 合计金额 缴费明细 -->
			<view style="display: flex; flex-direction: column; flex-grow: 1">
				<view style="color: #ff9900; font-size: 32rpx">¥{{ total }}</view>
			</view>
			<view></view>
			<!-- 缴费 -->
			<view style="display: flex; align-items: center; justify-content: center; background-color: #25b785; height: 90rpx; width: 240rpx" @tap="onCharge">
				<view style="color: #fff; font-size: 34rpx">缴费</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	const util = require('../../../../utils/util.js');
	import { getInit, getBillDetail } from '../../../../utils/http/api'
	import { openWxPay } from '../../../../utils/pay/pay'
	export default {
		data() {
			return {
				// 上个页面传过来的ids
				ids: '',
				// 请求得到的待支付详情数据 列表
				detail_list: [],
				// 请求得到的总金额
				total: '',

				fitem: { name: '', price: '' }
			};
		},
		onLoad(options) {
			// 获取初始化支付信息
			this.reqInit()
			// 设置传过来的参数
			this.setData({ ids: options.ids })
			// 获取物业房租费账单详情
			this.reqBillDetail()
		},
		// 用户点击右上角分享
		onShareAppMessage: function() {},
		methods: {
			onCharge(e) {
				if (!this.total) {
					uni.showToast({ title: '数据加载中,请稍候重试', icon: 'none' })
					return
				}
				// type, amount_total, number, ids
				openWxPay(0, '', '', this.ids)
			},

			// 获取物业房租费账单详情
			async reqBillDetail() {
				uni.showLoading({ title: '处理中', mask: true })
				let { code, msg, data } = await getBillDetail({ ids: this.ids, token: app.globalData.gl.token })
				if (code == '1') {
					this.setData({ detail_list: data.data, total: data.total })
				} else {
					uni.showToast({ title: msg, icon: 'none' })
				}
			},

			// 初始化支付信息等
			async reqInit() {
				let { code, msg, data } = await getInit({})
				if (code == '1') {
					app.globalData.gl.wx_appsecret = data.app_secret
				}
			},

			// onShare 分享
			onShare(e) {
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareTimeline'],
					success: (e) => {},
					fail: (e) => {}
				})
			}
		}
	};
</script>
<style scoped>
	.container {
		display: flex;
		flex-direction: column;
	}

	.input {
		width: auto;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
		padding: 20rpx;
		border-width: 5rpx;
		border-color: #f8f8f8;
		border-style: solid;
		border-radius: 10rpx;
	}

	.item {
		display: flex;
		flex-direction: column;
		position: relative;
		margin-top: 60rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}
</style>